<template>
    <el-card shadow="never" class="form-card">

        <div slot="header">

            <span style="font-weight: bold">
                   Search
            </span>
        </div>
        <el-form ref="searchCustomerForm" :model="searchCustomerForm" :rules="searchCustomerRules"
                 size="mini" label-width="100px"
                 label-position="left">
            <el-row type="flex" justify="start" align="top">
                <el-form-item size="mini" label-width="90px" label="CustomerID:" prop="customerId">
                    <el-input v-model="searchCustomerForm.customerId" placeholder="customer id"
                              clearable :style="{width: '80%'}">
                    </el-input>
                </el-form-item>
                <el-form-item label-width="130px" label="CustomerName:" prop="customerName">
                    <el-input v-model="searchCustomerForm.customerName" placeholder="customer name"
                              clearable :style="{width: '80%'}">
                    </el-input>
                </el-form-item>
                <el-form-item label-width="80px" label="Enterprise:" prop="enterpriseProperty">
                    <el-select v-model="searchCustomerForm.enterpriseProperty"
                               placeholder="enterprise" filterable clearable
                    >
                        <el-option v-for="(item, index) in options.enterprisePropertyOptions" :key="index"
                                   :label="item.label"
                                   :value="item.value" :disabled="item.disabled"></el-option>
                    </el-select>
                </el-form-item>
            </el-row>
            <el-row type="flex" justify="start" align="top">
                <el-form-item label-width="90px" label="SalesDept:" prop="customerMgrDept">
                    <el-select :disabled="disableSalesDept"
                               v-model="searchCustomerForm.customerMgrDept" placeholder="sales department"
                               clearable
                               :style="{width: '80%'}">
                        <el-option v-for="(item, index) in options.customerMgrDeptOptions" :key="index"
                                   :label="item.label"
                                   :value="item.value" :disabled="item.disabled"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label-width="140px" label="CustomerManager:" prop="customerMgrName">
                    <el-select :disabled="currentUser.roles[0]===this.$npms.roles.CUSTOMER_MGR"
                               v-model="searchCustomerForm.customerMgrName" placeholder="sales manager"
                               clearable
                    >
                        <el-option v-for="(item, index) in customerMgrNameOptions" :key="index"
                                   :label="item.label"
                                   :value="item.value" :disabled="item.disabled"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item style="margin-left: -25px">
                    <el-button class="p-button" type="primary" icon="el-icon-search" @click="submitSearch"
                    >Search
                    </el-button>
                    <el-button class="button" icon="el-icon-refresh-right" @click="resetSearchCustomer">Reset
                    </el-button>
                </el-form-item>
            </el-row>
        </el-form>

    </el-card>
</template>

<script>

export default {
    name: "CustomerSearch",
    props: ['options', 'callback'],
    data() {
        return {
            searchCustomerForm: {
                customerId: "",
                customerName: "",
                enterpriseProperty: "",
                customerMgrDept: undefined,
                customerMgrName: undefined,
                addRelatedCustomer: undefined,
            },
            disableSalesDept: false,
            searchCustomerRules: {
                customerId: [],
                customerName: [],
                enterpriseProperty: [],
                customerMgrDept: [],
                customerMgrName: [],
            },
            customerMgrNameOptions: [],
            currentUser: {},
        }
    },
    methods: {
        submitSearch() {
            this.$refs['searchCustomerForm'].validate(valid => {
                if (!valid) return
                var data = JSON.parse(JSON.stringify(this.searchCustomerForm))
                console.log('queryCondition:', data)
                this.callback(data)
            })
        },
        getQueryCondition() {
            var data = JSON.parse(JSON.stringify(this.searchCustomerForm))
            return data
        },
        resetSearchCustomer() {
            this.$refs['searchCustomerForm'].resetFields()
        },
        getAllCustomerManager() {
            this.$axios.get('/user/getAllCustomerManager').then(e => {
                console.log(e)
                var users = e.data.data
                var options = this.usersToOptions(users)
                this.customerMgrNameOptions = options
            })
        },
        getCustomerManagerByDeptID(deptId) {
            this.$axios.get('/user/getCustomerManagerByDeptId', {
                params: {
                    deptId: deptId
                }
            }).then(e => {
                console.log(e)
                var users = e.data.data
                console.log(users)
                var options = this.usersToOptions(users)
                console.log(options)
                this.customerMgrNameOptions = options
            })
        },
        usersToOptions(users) {
            var list = []
            users.forEach(item => {
                var ii = {
                    label: `[${item.userId}]${item.userName}`,
                    value: item.userName
                }
                list.push(ii)
            })
            return list
        }


    },
    mounted() {
        var user = this.$store.getters.getUser;
        this.currentUser = user;
        console.log(user)
        var role = user.roles[0]
        var deptID = user.userDeptId
        //根据当前登录用户Role来判断是否
        if (role === this.$npms.roles.CUSTOMER_MGR) {
            //客户经理
            this.disableSalesDept = true
            this.searchCustomerForm.customerMgrName = user.userRealname
            this.searchCustomerForm.customerMgrDept = user.userDeptId
        } else if (role === this.$npms.roles.BUSSINESS_MGR) {
            //事业部经理
            this.disableSalesDept = true
            this.searchCustomerForm.customerMgrDept = user.userDeptId

            this.getCustomerManagerByDeptID(deptID);
        } else if (role === this.$npms.roles.MARKET_MGR) {
            //营销总监
            this.disableSalesDept = true
            this.searchCustomerForm.customerMgrDept = user.userDeptId

            this.getCustomerManagerByDeptID(deptID);
        } else if (role === this.$npms.roles.MARKET_SP) {
            //营销专员
            this.getAllCustomerManager();
        } else if (role === this.$npms.roles.MARKET_SUB_MGR) {
            //营销副总
            this.getAllCustomerManager()
        } else if (role === this.$npms.roles.ADMIN) {
            this.getAllCustomerManager()
        }
    }
}
</script>

<style scoped>
.form-card {
    width: 100%;
    height: 180px;
    border-radius: 15px;
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
}
</style>